<template>
	<view>
		<rllr></rllr>
		
		<view class="margin-top-sm">
			<view class="padding-xs w-25 inline-block">
				<view @tap="toBm" class="flex flex-direction align-center relative bg-main radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-baomingrenshu-"></text>
					</text>
					<text class="text-sm">报名</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{bmnumber}}</text>
				</view>
			</view>
			
			<view class="padding-xs w-25 inline-block">
				<view @tap="yjIn" v-if="client.yj == 0" class="flex flex-direction align-center relative bg-main radius shadow padding-sm">
					<text  class="text-sl">
						<text class="iconfont icon-3"></text>
					</text>
					<text class="text-sm">{{'保证金'}}</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">￥{{client.yj / 100}}</text>
				</view>
				
				<view @tap="yjOut" v-else  class="flex flex-direction align-center relative bg-main radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-yiquxiao"></text>
					</text>
					<text class="text-sm">{{'退保'}}</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">￥{{client.yj / 100}}</text>
				</view>
			</view>
			
			<view class="padding-xs w-25 inline-block">
				<view @tap="toTkNew" class="flex flex-direction align-center relative bg-main radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-yue"></text>
					</text>
					<text class="text-sm">余额</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">￥{{amount.amount / 100}}</text>
				</view>
			</view>
			
			
			<view class="padding-xs w-25 inline-block">
				<view @tap="toFxjl" class="flex flex-direction align-center relative bg-main radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-shanchang"></text>
					</text>
					<text class="text-sm">奖励记录</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{fxnumber}}</text>
				</view>
			</view>
			
			<view class="padding-xs w-25 inline-block">
				<view @tap="toTkjl" class="flex flex-direction align-center relative bg-main radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-yusuanbaobiao"></text>
					</text>
					<text class="text-sm">提款记录</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{tqnumber}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				client: this.store.state.client,
				ajiaolian: this.store.state.jl,
				adz: this.store.state.dz,
				lxmap: this.location.lxmap,
				amount: this.store.state.amount,
				
				
				tqnumber: 0,
				bmnumber: 0,
				fxnumber: 0,
			};
		},
		created: function() {
			this.init();
		},
		methods: {
			init: function() {
				this.loadClient();
			},
			loadClient: function() {
				this.api("/client/info/get").send({
					clientid: this.store.state.client.clientid
				}).then(data => {
					console.log(data);
					this.client = data.client;
					this.amount = data.amount;
					this.bmnumber = data.bmnumber;
					this.tqnumber = data.tqnumber;
				});
			},
			
			loadFx: function(){
				this.api("/client/fxjl/page").send({
					size: 4,
					fxclientid: this.client.clientid
				}).then(data => {
					this.afxjls = data.afxjls.records;
					this.fxtotal = data.afxjls.total;
				});
			},
			toTkNew: function() {
				uni.navigateTo({
					url: '/pages/wd/tk/new'
				});
			},
			toSet: function() {
				uni.navigateTo({
					url: '/pages/wd/rllr'
				});
			},
			toTkjl: function() {
				uni.navigateTo({
					url: '/pages/wd/tk/list'
				});
			},
			toFxjl: function() {
				uni.navigateTo({
					url: '/pages/wd/fx/list'
				});
			},
			
			yjIn: function() {
				this.api("/client/yj/in").send({
					clientid: this.client.clientid
				}).then(res => {
					console.log(res);
					this.client = res.client;
					this.amount = res.amount;
					this.pay.exePay(JSON.parse(this.client.prepaydata)).then(data => {
						this.message.info("缴纳成功");
						this.init();
					});
				});
			},
			
			yjOut: function() {
				this.api("/client/yj/out").send({
					clientid: this.client.clientid
				}).then(res => {
					this.message.info("退保证金成功，已经转到余额中。");
					this.init();
				});
			},
			
			toBm: function() {
				uni.navigateTo({
					url: '/pages/cxy/bm/list'
				});
			}
			
		}
	}
</script>

<style scoped>
	.setting-container {
		width: 100%;
		height: 12rem;
		background-color: #FFF;
		position: relative;
		overflow: hidden;
	}

	.person {
		width: 100%;
		height: 101%;
		position: absolute;
		top: 0;
		background: rgba(255, 255, 255, 0.9);
	}



	.cover {
		width: 5rem;
		height: 5rem;
	}

	.info {
		width: calc(100% - 12rem);
		padding-left: 2rem;
	}

	.setting {
		width: 5rem;
		font-size: 2rem;

	}

	.title {
		position: relative;
		padding-right: 1rem;
	}
</style>